import { Button, Checkbox, Form, Input,message,Upload} from 'antd';
import React, { useEffect, useState } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { UploadOutlined ,DeleteFilled,EditFilled} from '@ant-design/icons';
import {useNavigate} from "react-router-dom"
import './less/Means.less' 
import { ChangeUserDataApi } from '../request/api';

// function beforeUpload(file) {
//     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//     if (!isJpgOrPng) {
//       message.error('You can only upload JPG/PNG file!');
//     }
//     const isLt2M = file.size / 1024 / 1024 / 1024  < 200;
//     if (!isLt2M) {
//       message.error('请上传小于200KB的图!');
//     }
//     return isJpgOrPng && isLt2M;
//   }
//   function getBase64(img, callback) {
//     const reader = new FileReader();
//     reader.addEventListener('load', () => callback(reader.result));
//     reader.readAsDataURL(img);
//   }
  
export default function Means() {
    const navigate=useNavigate()
    // const [loading, setLoading] = useState(false)
    // const [imageUrl, setImageUrl] = useState("")
    // const uploadButton = (
    //     <div>
    //       {loading ? <LoadingOutlined /> : <PlusOutlined />}
    //       <div style={{ marginTop: 8 }}>Upload</div>
    //     </div>
    //   );
    const nickName=localStorage.getItem('username');
    // const handleChange = info => {
    //     if (info.file.status === 'uploading') {
    //       setLoading(true)
    //       return;
    //     }
    //     if (info.file.status === 'done') {
    //       // Get this url from response in real world.
    //       getBase64(info.file.originFileObj, imageUrl =>{
    //         setLoading(false)
    //         setImageUrl(imageUrl)
    //         // 存储图片名称
    //         localStorage.setItem('avatar', info.file.response.data.filePath)
    //         // 使用react-redux
    //         props.addKey()
    //       }
    //       );
    //     }
    //   };
    // const props = {
    //     name: 'file',
    //     action: 'http://localhost:8080/articles/uploadFile',
    //     headers: {
    //         Authorization: localStorage.getItem("token"),
    //     },
      
    //     onChange(info) {
    //       if (info.file.status !== 'uploading') {
    //         console.log(info.file, info.fileList);
    //       }
      
    //       if (info.file.status === 'done') {
    //         message.success(`${info.file.name} 文件上传成功！`);
    //       } else if (info.file.status === 'error') {
    //         message.error(`${info.file.name} 文件上传失败！请重新上传！`);
    //       }
    //     },
    //   };
    //<Form.Item>
//     点击下方修改头像:
//     <Upload
//     name="avatar"
//     listType="picture-card"
//     className="avatar-uploader"
//     showUploadList={false}
//     action="/api/upload"
//     beforeUpload={beforeUpload}
//     onChange={handleChange}
//     headers={{"cms-token": localStorage.getItem('cms-token')}}
//   >
//     {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
//   </Upload>
//   </Form.Item>
    const onFinish = (values) => {
        ChangeUserDataApi({
            nickName: values.nickname,
            passWord: values.password,
            email:values.email
        }).then(res=>{
            if(res.code===200){
                message.success("更新成功！请重新登陆!");
                //跳到登录页
                setTimeout(()=>navigate('/login'),1500)
            }
        })
      };
    
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
    
      return (
        <div className='changeInfo'>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item 
            label="昵称"
            name="nickname"
            rules={[
              {
                required: true,
                message: '请重新输入用户名',
              },
            ]}
          >
            <Input className='inputchange' defaultValue={nickName}/>
          </Form.Item>
    
          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input type='password' className='inputchange'/>
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              {
                required: false,
                
              },
            ]}
          >
            <Input type='password' className='inputchange'/>
          </Form.Item>
          
      

      <Form.Item
            wrapperCol={{
              offset: 8,
              span: 8,
            }}
          >
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
        </div>
      );
}
